// 1- 下载路由模块
// cnpm i vue-router@3
import Vue from "vue";
// 2- 引入
import VueRouter from "vue-router";
import App from "@/App.vue";
import Home from "@/pages/Home.vue";
import GoodsList from "@/pages/GoodsList.vue";
import My from "@/pages/My.vue";
import NewsList from "@/pages/NewsList.vue";
import NoFound from "@/pages/NoFound.vue";
import One from "@/pages/One.vue";
import Two from "@/pages/Two.vue";
import Three from "@/pages/Three.vue";

// 3- 安装路由
Vue.use(VueRouter);// 负责提供路由的组件以及属性。
new Vue({
	render:h=>h(App),
	// 4- 路由配置
	router:new VueRouter({
		// 注意1：如果设置了相同的路由地址，只会将第一个匹配的路由作为渲染的路由
		// 注意2：路由地址是不区别大小写的
		routes:[
			{
				// 当其它路由地址不满足时，该路由生效。
				path:"*",
				component:NoFound
			},
			{
				// 当请求资源地址为/,那么渲染的路由组件为Home
				path:"/",
				component:Home
			},{
				path:"/goodsList",
				alias:"/g",// 指定地址别名
				component:GoodsList
			},{
				path:"/my",
				component:One
			},{
				path:"/my",
				component:My,// 相当于：components:{default:My}
			},
			{
				path:"/newsList",
				alias:["/one","/two","/three"],// 指定多个地址别名
				component:NewsList
			},{
				// 当你请求的地址为/home,那么会帮你重定向至地址为/的路由
				path:"/home",
				redirect:"/",// 重定向地址
			},
			{
				// 单页面多路由
				path:"/more",
				components:{
					One,
					Two,
					default:Three
				}
			}

		],
		// 路由模式:history与hash("默认“)
		mode:"history"
	})
}).$mount("#app")